<template>
  <el-card header="数据源配置">
    <el-form ref="sourEdit" :model="dataSource" label-width="120px">
      <el-form-item
        v-for="item in configs"
        :key="item.Key"
        :label="item.Label"
        :prop="item.Key"
      >
        <el-input
          v-if="item.Type == 0"
          v-model="dataSource[item.Key]"
          :maxlength="50"
          :placeholder="item.Placeholder"
        />
        <treeDicItem
          v-else-if="item.Type == 1"
          v-model="dataSource[item.Key]"
          :dic-id="item.DicId"
          :placeholder="item.Placeholder"
        />
        <dictItem
          v-else-if="item.Type == 2"
          v-model="dataSource[item.Key]"
          :dic-id="item.DicId"
          :placeholder="item.Placeholder"
        />
        <el-switch v-else-if="item.Type == 3" :key="ver" v-model="dataSource[item.Key]" @change="()=> { ver= ver + 1}" />
        <el-select
          v-else-if="item.Type == 4"
          v-model="dataSource[item.Key]"
          :placeholder="item.Placeholder"
          @change="()=> { ver= ver + 1}"
        >
          <el-option
            v-for="op in item.Items"
            :key="op.Key"
            :value="op.Key"
            :label="op.Value"
          >{{ op.Value }}</el-option>
        </el-select>
        <span v-else-if="item.Type == 5" :key="ver">{{ dataSource[item.Key] }}</span>
        <el-input-number
          v-else-if="item.Type == 6"
          v-model="dataSource[item.Key]"
          :placeholder="item.Placeholder"
        />
        <deptSelect
          v-else-if="item.Type == 7"
          v-model="dataSource[item.Key]"
          :is-unit="true"
        />
        <deptSelect
          v-else-if="item.Type == 8"
          v-model="dataSource[item.Key]"
          :is-chiose-unit="false"
        />
        <companySelect v-else-if="item.Type == 9" v-model="dataSource[item.Key]" />
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import companySelect from '@/components/company/companySelect.vue'
import deptSelect from '@/components/unit/deptSelect.vue'
export default {
  components: {
    companySelect,
    deptSelect
  },
  props: {
    template: {
      type: Array,
      default: () => {
        return []
      }
    },
    value: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      dataSource: {},
      configs: [],
      ver: 0
    }
  },
  watch: {
    template: {
      handler(val) {
        if (val && val.length > 0) {
          this.reset()
        } else {
          this.configs = []
          this.dataSource = {}
          this.$emit('input', {})
        }
      },
      immediate: true
    },
    value: {
      handler(val) {
        if (val) {
          this.reset()
        }
      },
      immediate: false
    }
  },
  mounted() {
  },
  methods: {
    reset() {
      const data = this.value == null ? {} : this.value
      this.template.forEach(c => {
        // eslint-disable-next-line no-prototype-builtins
        if (!data.hasOwnProperty(c.Key)) {
          if (c.Type === 3) {
            data[c.Key] = false
          } else {
            data[c.Key] = null
          }
        }
        if (c.DefValue != null && data[c.Key] == null) {
          data[c.Key] = c.DefValue
        }
      })
      this.dataSource = data
      this.configs = this.template
      this.$emit('change', data)
      this.ver = this.ver + 1
    },
    async validate() {
      const res = await this.$refs['sourEdit'].validate()
      if (res) {
        this.$emit('input', this.dataSource)
      }
      return res
    }
  }
}
</script>
  <style scoped>
  .el-cascader {
    width: 100%;
  }
  </style>
